<script setup lang='ts'>
  import  bokInfo from '@/store/bokInfo'
  import {onMounted, ref} from "vue"
  import { useRouter } from 'vue-router';
    const rankInfo =ref()
  onMounted(async()=>{
    await bokInfo().getCurrentDayBokRanking()
    rankInfo.value= bokInfo().currentDayBoks;
  })
  
  
  
    const isShow1=(index:number):boolean=>{
      return   [1,2].includes(index)
    }
    const isShow2=(index:number):boolean=>{
      return   [0].includes(index)
    }
    const isShow3=(index:number):boolean=>{
      return   ![0,1,2].includes(index)
    }
  
    const check =(index:number)=>{
     return  [3,4].includes(index) ?'ml-20':""
    }
  
  
    const  rightIsShow=()=>{
       const arr =["/blogger/content/selfInfo/post","/blogger/content/selfInfo/collection",
       "/blogger/content/selfInfo/attention","/blogger/content/selfInfo/fans","/blogger/content/selfInfo"
       ,'/blogger/content/create',"/blogger/content/sign","/blogger/content/search"]
       return !arr.includes(useRouter().currentRoute.value.path)
    }
  </script>
  <template>
  <div v-if="rightIsShow()" class='flex flex-col  justify-center items-center '>
      <div  class="border   md:w-3/4 bg-white   shadow-md rounded-lg
   flex flex-col justify-center items-center -ml-2   hover:bg-gray-50">
      <h1 class="w-full text-gray-600  border-b p-5">社区小帖</h1>
      <div>
         <p class=" text-sm p-2"> 学易网是一个主张友好、分享、自由的技术交流社区、让我们一起加油</p>
      </div>
      <div class="">
          <p class=" text-sm text-red-500  ">请维护网络安全、建立友好关系</p>
      </div>
      <div class=" rounded-md w-full bg-slate-300 p-3 mt-5 flex justify-center items-center gap-6">
           <router-link :to="{name:'blogger.content.create'}" class="user-write-style">发帖交流</router-link>
           <router-link :to="{name:'blogger.content.sign'}" class="user-islogin-style">签到打卡</router-link>
      </div>
  </div>
  
  
  <!-- 排行，只要排名前10的热度 -->
  <div class="w-3/4  md:block shadow-md mt-8 -ml-2 overflow-x-auto">
      <el-card class="!rounded-md">
      <template #header>
        <div class="card-header">
          <!-- <icon-vigo theme="outline"  size="24" fill="#da3f3f" /> -->
          <p class="text-[40px]">🔥</p>
          <h2 class="text-sm text-gray-600">热度排名</h2>
          <el-button class="button" text>点击更新</el-button>
        </div>
      </template>
      <div  v-for="(v,index) in rankInfo" :key="index" class="border-b">
         <section v-if="[0,1,2,3,4].includes(index)" class="flex justify-start itms-center">
           <p  class="w-[24px] h-[24px]" v-show="check(index)">&nbsp</p>
           <p v-show="isShow2(index)" class="mt-3 text-[20px]">👑</p>
          <!-- <icon-crown-two v-show="isShow2(index)" theme="outline" size="30" fill="#f8e71c" class='mt-2'/> -->
          <!-- <icon-trophy v-show="isShow1(index)" theme="outline" size="24"
           :fill="index==1?'#ff4c25':'#5eadad'" class="mt-2"/> -->
           <p v-show="isShow1(index)" class="mt-3 text-[20px]">🏅</p>
          <img :src="v.user.avatar" class="ml-10 mt-2  w-9 h-9 object-cover
      rounded-full" >
           <p class="leading-10 text-sm ml-2 mt-2">{{v.user.nickName}}</p>
         </section>
          <section class="flex justify-start items-center ">
            <p class=" text-[20px]">📚</p>
            <!-- <icon-bookmark class="ml-[77px]" theme="outline" size="16" fill="#b1ac14"/> -->
          <p class="truncate   text-sm ml-9 " v-if="[0,1,2,3,4].includes(index)">{{v.title}}</p>

          </section>
      </div>
    </el-card>
  </div>
  
  </div>
  </template>
  <style scoped lang='scss'>
  
  .user-islogin-style{
      @apply bg-green-400 text-white  p-3 mr-3  block
           py-2 rounded-md   hover:bg-green-700 duration-500 text-xs md:text-[15px]
   }
  
   .user-write-style{
      @apply bg-blue-400 text-white  p-3 mr-3  block
           py-2 rounded-md   hover:bg-blue-700 duration-500 text-xs md:text-[15px]
   }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>